<!-- 条目查看页面 -->
<div class="box box-default">
  <div class="box-body">
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="nav-tabs-custom remove-border">
            <ul class="nav nav-tabs ul-change" style="border-bottom-width: 0px;margin-bottom:10px;">
              <li *ngIf="_.includes(tabRight,'flfg')" id="flfg" [ngClass]="{'active':tabRight[0] == 'flfg'}" (click)="changeTab('flfg',0)">
                <a href="#tab_11" data-toggle="tab">法律法规</a>
              </li>
              <li *ngIf="_.includes(tabRight,'gszd')" id="gszd" [ngClass]="{'active':tabRight[0] == 'gszd'}" (click)="changeTab('gszd',1)">
                <a href="#tab_11" data-toggle="tab">公司制度</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htgm')" id="htgm" [ngClass]="{'active':tabRight[0] == 'htgm'}" (click)="changeTab('htgm',0)">
                <a href="#tab_11" data-toggle="tab">合同/公募</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htydy')" id="htydy" [ngClass]="{'active':tabRight[0] == 'htydy'}" (click)="changeTab('htydy',0)">
                <a href="#tab_11" data-toggle="tab">合同/一对一</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htydd')" id="htydd" [ngClass]="{'active':tabRight[0] == 'htydd'}" (click)="changeTab('htydd',0)">
                <a href="#tab_11" data-toggle="tab">合同/一对多</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htnj')" id="htnj" [ngClass]="{'active':tabRight[0] == 'htnj'}" (click)="changeTab('htnj',0)">
                <a href="#tab_11" data-toggle="tab">合同/年金</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htylj')" id="htylj" [ngClass]="{'active':tabRight[0] == 'htylj'}" (click)="changeTab('htylj',0)">
                <a href="#tab_11" data-toggle="tab">合同/养老金</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htyljcp')" id="htyljcp" [ngClass]="{'active':tabRight[0] == 'htyljcp'}" (click)="changeTab('htyljcp',0)">
                <a href="#tab_11" data-toggle="tab">合同/养老金产品</a>
              </li>
              <li *ngIf="_.includes(tabRight,'htsb')" id="htsb" [ngClass]="{'active':tabRight[0] == 'htsb'}" (click)="changeTab('htsb',0)">
                <a href="#tab_11" data-toggle="tab">合同/社保</a>
              </li>
              <li id="all" (click)="changeTab('',0)">
                <a href="#tab_11" data-toggle="tab">全部</a>
              </li>
              <li id="reading" (click)="showModal('5')">
                <a href="#tab_12" data-toggle="tab">阅读维护须知正文</a>
              </li>
            </ul>

            <div class="tab-content" style="padding:0px !important">

              <div class="tab-pane" id="tab_11">
                <form class="form-inline" style="margin-bottom:8px !important;">
                  <div class="box box-default collapsed-box">
                    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 btn-margin" style="padding-left:0px;">
                      <button type="button" class="btn btn-primary" (click)="shownQDIIViewSearch()">
                        <i class="fa fa-save"></i>搜索</button>
                      <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-flowInfo')" type="button" class="btn btn-primary" (click)="showModal('1')">
                        <i class="fa fa-search"></i>查看流程信息
                      </button>
                      <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-entryhistory')" type="button" class="btn btn-primary" (click)="showModal('2')">
                        <i class="fa fa-search"></i>查看条目历史
                      </button>
                      <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-15daysChange')" type="button" class="btn btn-primary" (click)="showModal('3')">
                        <i class="fa fa-search"></i>最新15天变更
                      </button>
                      <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-newestCompare')" type="button" class="btn btn-primary" (click)="showModal('4')">
                        <i class="fa fa-search"></i>最新对比数据
                      </button>
                      <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-export')" type="button" class="btn btn-primary" (click)="exportExcel()">
                        <i class="fa fa-sign-out"></i>导出数据
                      </button>
                      <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-historyChange')" type="button" class="btn btn-primary" (click)="showModal('historyChange')">
                        <i class="fa fa-sign-out"></i>查询历史变更数据
                      </button>
                      <!-- <button (click)="showModal('5')" type="button" class="btn btn-primary">
                            <i class="fa fa-sign-out"></i>阅读维护须知正文
                          </button> -->
                      <button class="btn btn-box-tool pull-right" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                      </button>
                    </div>
                    <div class="box-body">
                      <div class="form-group" style="padding-left:5px !important;margin-bottom:8px !important;">
                        <label class="control-label">账户名称：</label>
                        <input type="text" class="form-control" placeholder="账户名称" maxlength="2000" [(ngModel)]="getBody.sAccountName" name="sAccountName">
                        <label class="control-label">条款出处：</label>
                        <select [(ngModel)]="sFileSourcelist" name="sFileSourcelist" id="NqdiiViewFileSource" multiple></select>

                        <label class="control-label">适用基金类别：</label>
                        <select [(ngModel)]="sFundType" name="sFundType" id="NqdiiViewFundType" multiple></select>

                        <button (click)="loadlist(1)" type="button" class="btn btn-primary" style="margin-left:10px;">
                          <i class="fa fa-search"></i>查询</button>
                      </div>
                      <div class="form-group" style="padding-left:5px !important;margin-bottom:8px !important;">
                        <div class="form-group">
                          <label class="control-label">文件名称：</label>
                          <input type="text" class="form-control" placeholder="文件名称" maxlength="100" [(ngModel)]="getBody.sFileName" name="sFileName">
                          <label class="control-label">是否有效：</label>
                          <select class="form-control" style="min-width:183px;" name="sValid" [(ngModel)]="getBody.sValid">
                            <option [value]="''" selected="selected">全部</option>
                            <option [value]="1">有效</option>
                            <option [value]="0">无效</option>
                          </select>
                          <label class="control-label">风控条目编号：</label>
                          <input type="text" class="form-control" placeholder="风控条目编号" maxlength="9" [(ngModel)]="getBody.nNdId" (ngModelChange)="integerControl()"
                            name="nNdId">
                        </div>

                      </div>
                      <div class="form-group" style="padding-left:5px !important;">
                        <label class="control-label" style="padding-left:28px">内容：</label>
                        <input type="text" class="form-control" placeholder="内容" maxlength="2000" [(ngModel)]="getBody.f1" name="f1">
                        <label class="control-label" style="padding-left:15px">时间点：</label>
                        <div class="input-group date form_datetime" style="max-width:183px !important;">
                          <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                          </span>
                          <input [(ngModel)]="getBody.sOprDateCondition" name="sOprDateCondition" class="form-control" type="text" mwlFlatpickr style="background: white; cursor: pointer;">
                        </div>
                        <label class="control-label" style="padding-left:15px">适用基金组：</label>
                        <select [(ngModel)]="sFundGroupds" name="sFundGroupds" id="NqdiiViewFundGroupds" multiple></select>
                      </div>
                    </div>
                  </div>
                </form>

                <div class="ibt-fixed-table-container">
                  <div class="table-scroll-content">
                    <div #ViewTablePage></div>
                    <!-- <table class="table table-bordered table-hover table-striped table-keep-line" style="margin-top:unset !important;">
                      <thead>
                        <tr role="row">
                          <th>
                            <div class="cell" style="width:50px !important">
                              <div class="checkbox checkbox-primary">
                                <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                                <label>
                                </label>
                              </div>
                            </div>
                          </th>
                          <th>
                            <div class="cell" (click)="orderData('nNdId')">编号
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sLatestChange')">最近变更时间
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sFileName')">文件名称
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('f1')">内容
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sItemTypeZh')">属性
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sFileSourceZh')">条款出处
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sFundTypeZh')">适用基金类别
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sFundGroupdsZh')">适用基金组
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>

                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('f2')">指标释义
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('f3')">条目规定阀值
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkGreen" (click)="orderData('f4Zh')">事中控制方法
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkGreen" (click)="orderData('f5')">事中系统控制阀值
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkGreen" (click)="orderData('f6')">是否事中系统可控
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkGreen" (click)="orderData('f7')">系统风控编号
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkGreen" (click)="orderData('f8')">事中系统备注
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f9')">事后监控方法
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f10')">监控编号
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f11')">控制说明
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f12')">补偿控制
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f13')">风险等级
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f14')">监察部备注1
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkRed" (click)="orderData('f15')">监察部备注2
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkYellow" (click)="orderData('f16')">场外系统阀值(新股,定增,转债)
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkYellow" (click)="orderData('f17')">场外系统阀值(公增)
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkYellow" (click)="orderData('f18')">是否场外系统可控
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkYellow" (click)="orderData('f19')">场外风控编号
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkYellow" (click)="orderData('f20')">场外系统备注
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell" (click)="orderData('sCreator')">录入人
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell" (click)="orderData('sLaunchDate')">录入时间
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell" (click)="orderData('sCheckPerson')">条目复核
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell" (click)="orderData('sCheck')">复核时间
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>


                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let item of listData">
                          <td>
                            <div class="cell" style="width:50px !important">
                              <div class="checkbox checkbox-primary">
                                <input type="checkbox" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                                <label>
                                </label>
                              </div>
                            </div>
                          </td>
                          <td class="short_name" [attr.title]="item.nNdId">
                            <div class="cell" [ngClass]="{'dataChange':item.sState =='在途'}">{{item.nNdId}}
                            </div>
                          </td>
                          <td class="short_name" [attr.title]="item.sLatestChange">
                            <div class="cell">{{item.sLatestChange}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sFileName">
                            <div class="cell">{{item.sFileName}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f1">
                            <div class="cell">{{item.f1}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sItemTypeZh">
                            <div class="cell">{{item.sItemTypeZh}}</div>

                          </td>
                          <td class="short_name" [attr.title]="item.sFileSourceZh">
                            <div class="cell">{{item.sFileSourceZh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sFundTypeZh">
                            <div class="cell">{{item.sFundTypeZh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sFundGroupdsZh">
                            <div class="cell">{{item.sFundGroupdsZh}}</div>
                          </td>

                          <td class="short_name" [attr.title]="item.f2">
                            <div class="cell">{{item.f2}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f3">
                            <div class="cell">{{item.f3}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f4Zh">
                            <div class="cell">{{item.f4Zh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f5">
                            <div class="cell">{{item.f5}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f6Zh">
                            <div class="cell">{{item.f6Zh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f7">
                            <div class="cell">{{item.f7}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f8">
                            <div class="cell">{{item.f8}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f9Zh">
                            <div class="cell">{{item.f9Zh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f10">
                            <div class="cell">{{item.f10}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f11">
                            <div class="cell">{{item.f11}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f12">
                            <div class="cell">{{item.f12}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f13Zh">
                            <div class="cell">{{item.f13Zh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f14">
                            <div class="cell">{{item.f14}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f15">
                            <div class="cell">{{item.f15}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f16">
                            <div class="cell">{{item.f16}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f17">
                            <div class="cell">{{item.f17}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f18Zh">
                            <div class="cell">{{item.f18Zh}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f19">
                            <div class="cell">{{item.f19}}</div>

                          </td>
                          <td class="short_name" [attr.title]="item.f20">
                            <div class="cell">{{item.f20}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sCreator">
                            <div class="cell">{{item.sCreator}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sLaunchDate">
                            <div class="cell">{{item.sLaunchDate}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sCheckPerson">
                            <div class="cell">{{item.sCheckPerson}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sCheck">
                            <div class="cell">{{item.sCheck}}</div>
                          </td>
                        </tr>
                      </tbody>

                    </table> -->
                  </div>
                  <div class="ibt-table-fixed-content">
                    <table class="table table-bordered table-hover table-striped table-keep-line">
                      <thead>
                        <tr role="row">
                          <th>
                            <div class="cell" style="width:50px !important">
                              <div class="checkbox checkbox-primary">
                                <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                                <label>
                                </label>
                              </div>
                            </div>
                          </th>
                          <th>
                            <div class="cell" (click)="orderData('nNdId')">编号
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sLatestChange')">最近变更时间
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('sFileName')">文件名称
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                          <th>
                            <div class="cell risk-MarkBlue" (click)="orderData('f1')">内容
                              <i class="fa fa-sort"></i>
                            </div>
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let item of listData">
                          <td>
                            <div class="cell" style="width:50px !important">
                              <div class="checkbox checkbox-primary">
                                <input type="checkbox" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                                <label>
                                </label>
                              </div>
                            </div>
                          </td>
                          <td class="short_name" [attr.title]="item.nNdId">
                            <div class="cell" [ngClass]="{'dataChange':item.sState =='在途'}">{{item.nNdId}}
                            </div>
                          </td>
                          <td class="short_name" [attr.title]="item.sLatestChange">
                            <div class="cell">{{item.sLatestChange}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.sFileName">
                            <div class="cell">{{item.sFileName}}</div>
                          </td>
                          <td class="short_name" [attr.title]="item.f1">
                            <div class="cell">{{item.f1}}</div>
                          </td>
                        </tr>
                      </tbody>

                    </table>
                  </div>


                </div>
                <div class="box-footer clearfix" style="width:100%;">
                  <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="pageNavigation($event)">
                    <div class="pull-left pagination-detail" data-pagination-additional="true">
                      <span class="pagination-info">
                        当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
                      </span>
                      <span class="page-list">
                        每页记录
                        <span class="btn-group dropup">
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="page-size">{{listPageInfo.pageSize}}</span>
                            <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu" role="menu">
                            <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="sizeChange(i)">
                              <a>{{i}}</a>
                            </li>
                          </ul>
                        </span>
                        条
                      </span>
                    </div>
                  </app-pagination>
                </div>
              </div>




              <div id="tab_12" class="tab-pane">
                <div #readingNotes></div>
              </div>

            </div>


          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<!-- 查看流程信息modal -->
<div class="modal modal-detail" id="modal1">
  <div #viewFlowInfo></div>
</div>

<!-- 查看条目历史modal -->
<div class="modal modal-detail" id="modal2">
  <div #entryHistory></div>
</div>

<!-- 查看最近15天变更数据modal -->
<div class="modal modal-detail" id="modal3">
  <div #newChangeInfo></div>
</div>


<!-- 查询历史变更记录modal -->
<div class="modal modal-detail" id="historyChange">
  <div #historyChange></div>
</div>

<!-- 查看最新对比数据modal -->
<div class="modal modal-detail" id="modal4">
  <div #contrastInfo></div>
</div>

<!-- 搜索modal -->
<div class="modal modal-detail" id="nQDIIViewSearch">
  <div #nQDIIViewSearch></div>
</div>
<!-- 阅读维护须知正文modal -->
<!-- <div class="modal modal-detail" id="modal5">
  <div #readingNotes></div>
</div> -->



<!-- 搜索modal -->
<!-- <div class="modal modal-detail" id="search-modal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="hideSearchModal()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">搜索</h4>
      </div>
  
      <div class="modal-body">
        <form class="form-inline" style="margin-bottom:8px !important;">
          <div class="box box-default">
            <div class="box-body" style="display:block">
  
              <div class="form-group" style="padding-left:5px !important; margin-bottom:8px">
                <label class="control-label">是否有效：</label>
              
                
                <button type="button" class="btn btn-primary" style="margin-left:10px;" (click)="searchlist()">
                  <i class="fa fa-search"></i>查询</button>
              </div>
            </div>
          </div>
  
        </form>
      </div>
  
      <div class="modal-footer">
       
        
        <button type="button" class="btn btn-primary center-block" (click)="saveSelect()">搜索</button>
      
      </div>
    </div>
  </div>
</div> -->